uni-app通过canvas将两张图片合成一张图片
如果出现在开发工具工具中可以合成并查看,在真机预览时只有打开调试面板才能看到合成的图片,极大可能线上图片的地址中包含的域名,在微信呢后台没有配置,这时要检验一下微信后台配置的downloadFile域名中有没有线上图片的域名,在开发工具中查看如下
如果要在开发工具中检验是哪个域名导致的,可以把如下操作关掉,就可以检测了
<template>
<view class="share">
<button type="default" @click="exportPost"></button>
<view id="pre_style">
<image :src="page_data.post_img" mode="heightFix" class='poster'></iage>
<u-icon name="download" @click.native.stop="download_post"></u-icon>
</view>
<canvas
canvas-id="shareCanvas"
class="canvas"
bindlongpress="saveImg"
catchtouchmove="true"
:style="{height: canvasHeight+'rpx',width:canvasWidth+'rpx'}"
>
</canvas>
</view>
</template>
<script>
export default {
data(){
return {
pageData:{
post_img:'',
codePng:null
},
ctx:null,
windowObj:{}
}
},
onReady(){
this.ctx = wx.createCanvasContext('shareCanvas')
},
methods:{
getImageInfo(src) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src,
success: (res) => resolve(res),
fail: (res) => reject(res)
})
});
},
exportPost(){
let that = this
uni.showLoading({
title:'海报生成中'
})
let image ='https://cn.bing.com/images/search?view=detailV2&ccid=QLvpleW0&id=5B6A695B602912680FC5C239AE13A3EBA4F4E0F3&thid=OIP.QLvpleW0sVvyaVndJJLvPQHaEo&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fR40bbe995e5b4b15bf26959dd2492ef3d%3frik%3d8%252bD0pOujE645wg%26riu%3dhttp%253a%252f%252fwww.pp3.cn%252fuploads%252f1212qxn%252f476.jpg%26ehk%3dna1tDwMwrncjRAg1A9ROG%252bkj4YZrklFwjUCYQl2c8yo%253d%26risl%3d%26pid%3dImgRaw&exph=1200&expw=1920&q=%e5%9b%be%e7%89%87&simid=607996108042012442&ck=DB9394719A910317FE77BFF4E17674F8&selectedIndex=9&qpvt=%e5%9b%be%e7%89%87&FORM=IRPRST'
uni.getSystemInfo({
success: function (res) {
that.windowObj = res
that.windowObj.ratio = that.windowObj.windowWidth/750
that.canvasWidth = that.windowObj.windowWidth/that.windowObj.ratio
that.canvasHeight = that.windowObj.windowHeight/that.windowObj.ratio
Promise.all([that.getImageInfo(image),that.getImageInfo(that.page_data.codePng)]).then(res=>{
let arr = [
{width:res[0].width,height:res[0].height},
{width:res[1].width/that.windowObj.pixelRatio/2,height:res[1].height/that.windowObj.pixelRatio/2}
]
that.ctx.drawImage(res[0].path,0 , 0,that.windowObj.windowWidth,res[0].height*that.windowObj.ratio);
that.ctx.drawImage(res[1].path, (that.windowObj.windowWidth-arr[1].width)/2, (that.windowObj.windowHeight-arr[1].height)-30,arr[1].width,arr[1].height);
that.ctx.draw(false,function(){
wx.canvasToTempFilePath({
x: 0,
y: 0,
width:that.windowObj.windowWidth,
height:that.windowObj.windowHeight,
destWidth:that.windowObj.windowWidth*2,
destHeight:that.windowObj.windowHeight*2,
canvasId: 'shareCanvas',
fileType:'jpg',
success: function (res) {
that.page_data.first_post_img = res.tempFilePath
uni.saveImageToPhotosAlbum({
filePath: that.page_data.first_post_img,
success: function () {
uni.hideLoading()
uni.showToast({
title:'保存成功'
})
},
})
}
})
});
})
}
})
},
},
}
</script>